<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Templating</span></h1>
        <p>Table provides templates to customize the content of various sections such as caption and summary.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-table [value]="products">
            <ng-template pTemplate="caption">
                <div class="p-d-flex p-ai-center p-jc-between">
                    Products
                    <p-button icon="pi pi-refresh"></p-button>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Price</th>
                    <th>Category</th>
                    <th>Reviews</th>
                    <th>Status</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>{{product.name}}</td>
                    <td><img [src]="'assets/showcase/images/demo/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /></td>
                    <td>{{product.price | currency:'USD'}}</td>
                    <td>{{product.category}}</td>
                    <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
                    <td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
                </tr>
            </ng-template>
            <ng-template pTemplate="summary">
                <div class="p-d-flex p-ai-center p-jc-between">
                    In total there are {{products ? products.length : 0 }} products.
                </div>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablesections-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-table [value]="products"&gt;
    &lt;ng-template pTemplate="caption"&gt;
        &lt;div class="p-d-flex p-ai-center p-jc-between"&gt;
            Products
            &lt;p-button icon="pi pi-refresh"&gt;&lt;/p-button&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Image&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;Category&lt;/th&gt;
            &lt;th&gt;Reviews&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-product&gt;
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&lt;img [src]="'assets/showcase/images/demo/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /&gt;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;product.price | currency:'USD'&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&lt;p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"&gt;&lt;/p-rating&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()"&gt;&#123;&#123;product.inventoryStatus&#125;&#125;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="summary"&gt;
        &lt;div class="p-d-flex p-ai-center p-jc-between"&gt;
            In total there are &#123;&#123;products ? products.length : 0 &#125;&#125; products.
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Product &#125; from '../../domain/product';
import &#123; ProductService &#125; from '../../service/productservice';

@Component(&#123;
    templateUrl: './tabletemplatingdemo.html'
&#125;)
export class TableTemplatingDemo implements OnInit &#123;

    products: Product[];

    constructor(private productService: ProductService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(data =&gt; this.products = data);
    &#125;
&#125;
</app-code>

        </p-tabPanel>
        
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablesections-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>